<template>
    <div class="one">
        <div class="one-q">
            <input type="text" placeholder="请输入要做的事情" class="one-qq" v-model="inputValue">
           
            <div class="one-qqq" @click="addNeirong()">添加</div>
        </div>
        <div class="two">
            <div class="two-q" v-for="(item,index) in list" :key="index">
                <div class="two-qq">{{ item }}</div>
                <div class="two-qqq" @click="deleteNeirong()">删除</div>
            </div>
           
        </div>

    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            list:[],
            inputValue:'',
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
addNeirong(){
    const a = this.inputValue
    this.list.push(this.inputValue)
    console.log(this.list);
},
deleteNeirong(){
    this.list.plice(list[list.length],1)
    console.log(this.list)
}

    }
};
</script>
<style scoped lang="scss">
.one{
    .one-q{
        height: 30px;
       border: 1px solid red;
       display: flex; 
       align-items: center;
       justify-content: center;
       margin: 40px 40px 0 40px;
       .one-qq{
margin: 0 auto;
        line-height: 30px;
         }
    .one-qqq{
        margin-left: auto;
        border: 1px solid red;
        border-radius: 6px;
        margin-right: 10px;
    }
    }
    .two{
        border: 1px solid red;
        margin: 30px 40px 0 40px;
    .two-q{
        height: 30px;
       border: 1px solid red;
       display: flex; 
       align-items: center;
       justify-content: center;
    margin-bottom: 10px;
      
       .two-qq{
margin: 0 auto;
        line-height: 30px;
         }
    .two-qqq{
        margin-left: auto;
        border: 1px solid red;
        border-radius: 6px;
        margin-right: 10px;

    }
    }
}}





</style>